<template>
  <div class="app-container">
    <!--    <button @click="handlePay">测试</button>-->
    <el-form :model="queryParams" ref="queryParamsRef" :inline="true">
      <el-form-item label="账户名称" prop="nickName">
        <el-input v-model="queryParams.nickName" placeholder="请输入账户名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row>
      <el-button icon="Plus" type="warning" @click="handleAdd">新增账户</el-button>
    </el-row>
    <el-table :data="tableData">
      <el-table-column align="center" label="账户名称" prop="nickName" />
      <el-table-column align="center" label="状态" prop="hasUse">
        <template #default="scope">
          <el-switch v-model="scope.row.hasUse" :active-value="1" :inactive-value="0"
            @change="changeState(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column align="center" label="账户upi地址" prop="upiUrl" />
      <el-table-column align="center" label="付款链接订单金额关键字" prop="replaceOrderAmount" />
      <el-table-column align="center" label="付款链接订单编号关键字" prop="replaceOrderNo" />
      <el-table-column align="center" label="付款链接三方编号关键字" prop="replaceUtrNo" />
      <el-table-column align="center" label="账户显示名称" prop="showName" />
      <el-table-column align="center" label="操作" width="260px">
        <template #default="scope">
          <el-button size="small" type="danger" plain @click="deleteHandle(scope.row)">删除</el-button>
          <el-button size="small" type="warning" @click="updateHandle(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize" @pagination="getList" />
    <el-dialog v-model="show" :title="title" @close="confirmHandle" width="40%" destroy-on-close>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="180px">
        <el-form-item label="收款账户名称" prop="nickName">
          <el-input v-model="form.nickName"  placeholder="请输入收款账户名称" />
        </el-form-item>
        <el-form-item label="付款链接订单金额关键字" prop="replaceOrderAmount">
          <el-input v-model="form.replaceOrderAmount"  placeholder="请输入付款链接订单金额关键字" />
        </el-form-item>
        <el-form-item label="付款链接订单编号关键字" prop="replaceOrderNo">
          <el-input v-model="form.replaceOrderNo"  placeholder="请输入付款链接订单编号关键字" />
        </el-form-item>
        <el-form-item label="付款链接三方编号关键字" prop="replaceUtrNo">
          <el-input v-model="form.replaceUtrNo"  placeholder="请输入付款链接三方编号关键字" />
        </el-form-item>
        <el-form-item label="收款账户显示名称" prop="showName">
          <el-input v-model="form.showName"  placeholder="请输入账户显示名称" />
        </el-form-item>
        <el-form-item label="收款账户upi" prop="upiUrl">
          <el-input v-model="form.upiUrl"  placeholder="请输入收款账户upi" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="confirmHandle">取 消</el-button>
          <el-button type="primary" @click="handleSubmit">提 交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { accountPage, addAccount, startAndStop, deleteAccount, updateAccount } from "@/api/account";
import { onMounted } from "vue";
const { proxy } = getCurrentInstance();
const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    nickName: "",
    upiAccountId: "",
  },
  form: {},
  addForm: {},
  rules: {
    nickName: [
      { required: true, message: "收款账户名称不能为空", trigger: "blur" },
    ],
    upiUrl: [
      { required: true, message: "收款账户地址不能为空", trigger: "blur" },
    ],
    hasUse: [
      { required: true, message: "是否启用必选", trigger: "blur" },
    ],
    replaceOrderAmount: [
      { required: true, message: "付款链接订单金额关键字不能为空", trigger: "blur" },
    ],
    replaceOrderNo: [
      { required: true, message: "付款链接订单编号关键字不能为空", trigger: "blur" },
    ],
    replaceUtrNo: [
      { required: true, message: "付款链接三方编号关键字不能为空", trigger: "blur" },
    ],
    showName: [
      { required: true, message: "收款账户显示名称不能为空", trigger: "blur" },
    ],

  },
});
const { queryParams, form, rules, addForm } = toRefs(data);
const tableData = ref([])
const show = ref(false)
const total = ref(0);
const title = ref('新增账户')
// 获取分页列表
function getList() {
  accountPage(queryParams.value).then((res) => {
    tableData.value = res.data.data
    total.value = res.data.total
  })
}
// 新增账号
function handleAdd() {
  show.value = true
  title.value='新增账户'
}
function handleSubmit() {
  proxy.$refs["formRef"].validate((valid) => {
    if (valid) {
      if (form.value.upiAccountId) {
        form.value.priId=form.value.upiAccountId
        const data={
          hasUse:form.value.priId,
          priId:form.value.upiAccountId,
          nickName:form.value.nickName,
          upiUrl:form.value.upiUrl
        }
        updateAccount(data).then((res) => {
          ElMessage.success('修改账户成功')
          getList()
        })
      } else {

        addAccount(form.value).then((res) => {
          ElMessage.success('新增账户成功')
          getList()
        })
      }
      form.value = {};
      show.value = false;
    }
  })
}
function resetQuery() {
  proxy.resetForm("queryParamsRef");
  
  handleQuery()
}
function handleQuery() {
  queryParams.value.pageNum = 1;
  tableData.value = []
  getList();
}

// 取消
function confirmHandle() {
  proxy.resetForm("formRef");
  show.value = false;
  form.value = {};
}
// 修改状态
function changeState(row) {
  const data = {
    hasUse: row.hasUse,
    priId: row.upiAccountId
  }
  startAndStop(data).then((res) => {
    ElMessage.success("修改状态成功！");
    getList();

  });
}
// 修改账户
function updateHandle(row) {
  title.value = '修改账户';
  const rowData = row;
  show.value = true;
  form.value = {...rowData};
}
// 删除用户
function deleteHandle(row){
  ElMessageBox.confirm(
    '确定删除吗?',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      
      deleteAccount({priId:row.upiAccountId}).then(()=>{
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
        getList();
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
}
onMounted(() => {
  getList()
})
</script>